<template>
  <content-box :title="title" style="height: 304px" :loading="loading">
    <template slot="left">
      <div class="flex items-center">
        <div class="font-size-14">
          车间设备总数：{{ total }}
          <span style="padding-left: 30px">设备联网总数：{{ networking }}</span>
        </div>
      </div>
    </template>
    <div style="height: 227px">
      <div class="flex chart-box full-width margin-t-20">
        <div class="chart" ref="normalStatus" id="normalStatus" style="height: 207px;max-width: calc((100% - 2px) /3)"/>
        <div class="bor"/>
        <div class="chart" ref="alarmStatus" id="alarmStatus" style="height: 207px;max-width: calc((100% - 2px) /3)"/>
        <div class="bor"/>
        <div class="chart padding-t-20 padding-b-20" style="height: 207px;max-width: calc((100% - 2px) /3)">
          <div class="full-width full-height flex justify-between items-center column" style="height: 207px">
            <progress-box v-for="(item, index) in manageStatus" :key="index" :data="item" :total="total" hasPercent/>
          </div>
        </div>
      </div>
    </div>
  </content-box>
</template>

<script>
import contentBox from 'src/pages/status-monitor-v3/components/status-overview/content-box'
import echarts from 'echarts'
import chart from 'src/pages/status-monitor-v3/components/status-overview/chart-option'
import progressBox from 'src/pages/status-monitor-v3/components/status-overview/progress'
import _ from 'lodash'
import { addListener } from 'resize-detector'
import { getCountDevice, getRealtimeStatus } from '../../../../boot/status-monitor/status-overview'
export default {
  name: 'workshop-real-time',
  components: {
    contentBox,
    progressBox
  },
  mounted () {
    this.getInfo()
    addListener(this.$refs.normalStatus, this.$utils.debounce(() => {
      if (this.$route.name !== 'home') {
        return
      }
      if (this.normalStatus === null) {
        this.normalStatus = echarts.init(this.$refs.normalStatus)
      } else {
        this.normalStatus.resize()
        this.getNormalStatus()
      }
      if (this.alarmStatus === null) {
        this.alarmStatus = echarts.init(this.$refs.getAlarmStatus)
      } else {
        this.alarmStatus.resize()
        this.getAlarmStatus()
      }
    }, 100))
  },
  data () {
    return {
      title: '车间当前状态',
      workshop: null,
      total: 0,
      loading: false,
      networking: 0,
      data: {
        process: 0, // 加工
        stop: 0, // 停机
        breaks: 0, // 断开
        offLine: 0, // 离线
        alert: 0, // 报警
        changeLine: 0, // 换线
        fault: 0, // 故障
        repair: 0 // 维修
      },
      normalStatus: null,
      alarmStatus: null,
      status: this.Enums.MACHINES_STATUS,
      manageStatus: [{
        label: '换线数量',
        color: 'linear-gradient(90deg, #AC70F2, #AC70F2)',
        count: 0,
        value: 'normalDeviceCount'
      }, {
        label: '故障数量',
        color: 'linear-gradient(90deg, #F7B82D, #F7B82D)',
        count: 0,
        value: 'slightSlowDeviceCount'
      }, {
        label: '维修数量',
        color: 'linear-gradient(90deg, #1DC4F6, #1DC4F6)',
        count: 0,
        value: 'severeDeviceCount'
      }]
    }
  },
  methods: {
    changeWorkshop (selId = null) {
      this.workshop = selId
      this.loading = true
      this.getCountDevice()
    },
    getCountDevice () {
      const params = {
        workshopId: this.workshop
      }
      getCountDevice(params).then(res => {
        this.total = this.$utils.label(res.allDeviceCount, 0)
        this.$emit('setTotal', this.total)
        this.networking = this.$utils.label(res.connectDeviceCount, 0)
      }).finally(() => {
        this.getRealtimeStatus(params)
      })
    },
    getRealtimeStatus (params) {
      getRealtimeStatus(params).then(res => {
        this.realTimeStatusData = res
        this.data = this.initRealTimeStatus(res)
      }).finally(() => {
        this.getNormalStatus()
        this.getAlarmStatus()
        this.$set(this.manageStatus[0], 'count', this.data.changeLine)
        this.$set(this.manageStatus[1], 'count', this.data.fault)
        this.$set(this.manageStatus[2], 'count', this.data.repair)
        this.loading = false
      })
    },

    // 重构实时状态分布
    initRealTimeStatus (info) {
      let realTimeStatus = {
        process: 0, // 加工
        stop: 0, // 停机
        breaks: 0, // 断开
        offLine: 0, // 离线
        alert: 0, // 报警
        changeLine: 0, // 换线
        fault: 0, // 故障
        repair: 0 // 维修
      }

      for (let key in info) {
        _.indexOf(info[key], 0) !== -1 && (++realTimeStatus.stop)
        _.indexOf(info[key], 1) !== -1 && (++realTimeStatus.process)
        _.indexOf(info[key], 51) !== -1 && (++realTimeStatus.process)
        _.indexOf(info[key], 2) !== -1 && (++realTimeStatus.offLine)
        _.indexOf(info[key], 3) !== -1 && (++realTimeStatus.breaks)
        _.indexOf(info[key], 4) !== -1 && (++realTimeStatus.alert)
        _.indexOf(info[key], 5) !== -1 && (++realTimeStatus.changeLine)
        _.indexOf(info[key], 6) !== -1 && (++realTimeStatus.fault)
        _.indexOf(info[key], 7) !== -1 && (++realTimeStatus.repair)
      }
      return realTimeStatus
    },
    getInfo () {
      if (this.$route.name !== 'home') {
        return
      }
      if (this.normalStatus === null) {
        this.normalStatus = echarts.init(this.$refs.normalStatus)
      }
      if (this.alarmStatus === null) {
        this.alarmStatus = echarts.init(this.$refs.alarmStatus)
      }
    },
    getNormalStatus () {
      const color = [this.status.MACHINING.color, this.status.HALTING.color, this.status.DISCONNECTING.color, this.status.OFFLINE.color]
      const seriesData = [
        { name: this.status.MACHINING.desc, value: this.data.process },
        { name: this.status.HALTING.desc, value: this.data.stop },
        { name: this.status.DISCONNECTING.desc, value: this.data.breaks },
        { name: this.status.OFFLINE.desc, value: this.data.offLine }
      ]

      const legend = _.map(seriesData, 'name')
      this.$nextTick(() => {
        const option = chart.getPieOption(color, legend, seriesData, document.getElementById('normalStatus'), this.networking)
        this.normalStatus.setOption(option)
      })
    },
    getAlarmStatus () {
      const color = [this.status.WARNING.color, '#e8e8e8']
      const seriesData = [
        { name: this.status.WARNING.desc, value: this.data.alert },
        { name: 'bg', value: this.networking - this.data.alert }]
      const legend = [this.status.WARNING.desc]
      this.$nextTick(() => {
        const option = chart.getPieOption(color, legend, seriesData, document.getElementById('alarmStatus'), this.networking)
        this.alarmStatus.setOption(option)
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .chart-box{
    height calc(100% - 20px)
    .bor{
      margin 40px 25px
      width 1px
      background-color #D3D3D3
      height calc(100% - 80px)
    }
    .chart{
      width calc((100% - 102px) / 3)
    }
  }
  .form-inline{
    padding 0 !important
  }
  >>>.multipe-select{
    margin 0 !important
  }
</style>
